<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- <h3 style="font-size: 20px;">请选择你的</h3> -->
    <!-- <div>
        <input type="checkbox" name="" id="" class="wife">咬人猫
    </div>
    <div>
        <input type="checkbox" name="" id="" class="wife">兔总裁
    </div>
    <div>
        <input type="checkbox" name="" id="" class="all">全都要



    </div> -->

    <style>

        .dark {
            color: white;
            background-color: black;
            height: 100%;
        }
        .light {
            color: black;
            background-color: #fff;
            height: 100%;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }

    </style>

    <div class="dark">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab mollitia accusantium neque soluta rerum ipsa aperiam nulla laboriosam impedit eius similique exercitationem magni, dolor molestiae blanditiis illum. Porro, laudantium similique?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis harum laborum officia? Assumenda repudiandae nam vero laboriosam optio culpa, commodi fuga aspernatur magnam ipsum possimus maiores provident error placeat porro.
    </div>

        <!-- <div class="parent">
            <div>11</div>
            <div>22</div>

            <div class="toDelete">33</div>

        </div> -->
    <script>
    
        // //删除节点
        // let div = document.querySelector('.parent');
        // let  toDelete = document.querySelector('.toDelete')
        // toDelete.removeChild(toDelete);


    // //新增节点
    //     let div = document.querySelector('.parent');
    //     let childDiv = document.createElement('div');
    //     childDiv.innerHTML = 44;
    //     div.appendChild(childDiv);


        let div = document.querySelector('div');
        div.onclick = function() {
            if(div.className == 'dark') {
                div.className = 'light';
            } else if(div.className == 'light') {
                div.className = 'dark';
            }
               
        }


        // let h3 = document.querySelector('h3');
        // h3.onclick = function() {

        //     let oldSize = h3.style.fontSize;
        //     console.log(oldSize);
        //     oldSize = parseInt(oldSize);
        //     oldSize += 10;
        //     h3.style.fontSize = oldSize + 'px';



        // }
        // let all = document.querySelector('.all');
        // let wives = document.querySelector('.wife');

        // all.onclick = function() {
        //     console.log('all.checked' + all.checked);
        //     for(let i = 0; i < wives.length; i++) {
                
        //         wives[i].checked = all.checked;
        //     }
        // }




        // let input = document.querySelector('input')
        // let addBtn = document.querySelector('#add')
        // let minusBtn = document.querySelector('#minus')
        // let multBtn = document.querySelector('#mult')
        // addBtn.onclick = function() {


        //     let oldValue = parseInt(input.value);
        //     oldValue += 1;
        //     input.value = oldValue;
        
        // }
        // minusBtn.onclick = function() {


        //     let oldValue = parseInt(input.value);
        //     oldValue -= 1;
        //     input.value = oldValue;

        // }
        // minusBtn.onclick = function() {


        //     let oldValue = parseInt(input.value);
        //     oldValue -= 1;
        //     input.value = oldValue;

        // }




        // let input = document.querySelector('input');
        // let button = document.querySelector('button');
        // button.onclick = function() {
        //     if(input.type == 'password') {
        //         input.type = 'text';
        //         button.innerHTML = '隐藏密码'
        //     } else if(input.type == 'text') {
        //         input.type = 'password';
        //     } else {
        //         alert('错误')
        //     }
            
        // }

        // let img = document.querySelector('img');
        // //获取属性
        // console.log(img.src);
        // console.log(img.alt);

        // img.onclick = function() {
        //     //修改属性
        //     img.src = '';
        // }


        //let div = document.querySelector('div');
        //获取元素的内容
        //console.log(div.innerHTML);
        //通过赋值来修改内容
        //div.onclick = function() {
            //文本 一个html片段
         //   div.innerHTML = '<button>按钮</button>';
        //}


        // var b = document.getElementById('btn')
        // b.onclick = function () {
        //     console.log('点击');
        // }
    </script>
</body>
</html>